<template>
    <div class="con">
        <div class="left">
            <div class="logo" style="line-height: 60px;">
                博雅高级中学
            </div>
            <left-menu></left-menu>
        </div>
        <div class="main">
            <div class="managerbar">
                <div>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        {{userName}}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                </div>
            </div>
            <div class="maindiv">
                    <router-view />
            </div>
        </div>
    </div>
</template>
<script>
    import LeftMenu from "../components/LeftMenu.vue";
    import { ArrowDown } from '@element-plus/icons-vue'
    export default {
        data() {
            return {
                userName: ''
            }
        },
        methods: {
            logout() {
                localStorage.clear();
                window.location.href = "/";
            }
        },
        components: {
            LeftMenu
        },
        mounted() {
            this.userName = localStorage['user']
        }
    }
</script>
<style scoped>
    .con {
        display: flex;
    }
    .logo {
        color: white;
        text-align: center;
        font-size: 20px;
        height: 50px;
    }
    .logoimg {
        width: 50px;
    }
    .left {
        width: 15%;
        min-width: 200px;
        position: absolute;
        top:0;
        left: 0;
        bottom: 0;
        padding: 0;
        background: #353b5a;
    }
    .main {
        background: #F2F3F5;
        width: 85%;
        box-sizing: border-box;
        margin-left: 15%;
        min-height: 400px;
        padding-bottom: 20px;
    }
    .managerbar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
        background: white;
        margin-bottom: 20px;
    }
    .maindiv {
        width: 96%;
        margin: 0 auto;
        background: white;
        padding: 30px 10px;
        overflow: hidden;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>